import React, { Component } from 'react'
import axios from 'axios'
import "./index.scss"
import MainHeader from './headerLoop/headerLoop'
import NavBox from '../../nav/nav'
import { Link } from 'react-router-dom'

export default class Main extends Component {
    constructor() {
        super()
        this.state = ({
            listNav: [],
            tuijianList: [],
            headerLooplist: [],
            h: 0,
            m: 0,
            s: 0
        })
    }
    countFun = (end) => {
        let now_time = new Date(new Date().setHours(33, 59, 59, 999)).getTime()
        var remaining = now_time - end;

        this.timer = setInterval(() => {
            //防止出现负数
            if (remaining > 1000) {
                remaining -= 1000;
                // let day = Math.floor((remaining / 1000 / 3600) / 24);
                let hour = Math.floor((remaining / 1000 / 3600) % 24);
                let minute = Math.floor((remaining / 1000 / 60) % 60);
                let second = Math.floor(remaining / 1000 % 60);

                this.setState({

                    h: hour < 10 ? "0" + hour : hour,
                    m: minute < 10 ? "0" + minute : minute,
                    s: second < 10 ? "0" + second : second
                })

            } else {
                clearInterval(this.timer);
                //倒计时结束时触发父组件的方法
                //this.props.timeEnd();

            }

        }, 1000);

    }


    async componentDidMount() {
        var res = await axios.post("https://srv.hotkidceo.com/appapi/api/root-ceo-content/hpPageConfigure/pageList", { "isWholeSale": 0, "channelId": null })

        var res1 = await axios.post("https://srv.hotkidceo.com/appapi/api/root-ceo-content/hpPageConfigure/pageList", { "channelId": null, "memberKey": "" })
        const end = Date.parse(new Date())
        this.countFun(end);
        this.setState({
            listNav: res.data.data[2].configureAttribute,
            tuijianList: res1.data.data[10].configureAttributeList,
            headerLooplist: res1.data.data[1].configureAttribute
        })
    }
    componentWillUnmount() {
        clearInterval(this.timer);
    }
    render() {
        let { listNav, tuijianList, headerLooplist, h, m, s } = this.state
        let { history } = this.props
        return (
            <div className='WangZai1'>
                {/* 轮播图 */}
                {/* <MainHeader headerLooplist={headerLooplist} listNav={listNav} /> */}

                {
                    headerLooplist.length !== 0 ? <MainHeader headerLooplist={headerLooplist} listNav={listNav} history={history} /> : ""
                }
                <div className='newPeople'></div>
                <div className='fashow'></div>
                <div className='miaos'>
                    <div className='time_box'>
                        <span>距结束</span>
                        <span>{h}</span> :
                        <span>{m}</span> :
                        <span>{s}</span>
                    </div>
                </div>
                {/* 首页为你推荐开始  */}
                <div >
                    {
                        tuijianList.map((item, index) => <div className='WangZai1_tuijian' key={index}>
                            {
                                item.map(i => <div className='WangZai1_tuijian_item' key={i.ptKey}>
                                    <Link to={"/item/" + i.ptKey} className='WangZai1_tuijian_item_img'>
                                        <img src={i.listImages} alt={i.listImages} />
                                    </Link>
                                    <div className='gift-shop-image'></div>
                                    <div className='good-item__name'>{i.name}</div>
                                    <div className='good-item__name-2'>{i.displayName}</div>
                                    <div className='price'>
                                        <div className='price_price'>
                                            <p className='price_price_red'>￥<span >{i.retailPrice}</span></p>
                                            <p className='price_price_black'>￥<span>{i.supplyPrice}</span>
                                                <span className='price_price_VIP'></span>
                                            </p>
                                        </div>
                                        <div className='wzCarBtn'>
                                        </div>
                                    </div>

                                </div>)
                            }
                        </div>)
                    }
                </div>
                {/* 首页为你推荐结束  */}
                <NavBox />

            </div >

        )
    }
}
